<template>
  <div class="page order-detail-page">
    <van-nav-bar title="订单详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="container">
        <van-cell
                v-if="order.take_type==1"
                class="address-item margin-top"
                size="large"
                icon="location-o"
                is-link
        >
          <div>
            <div class="address-name">{{order.recive_name}}, {{order.mobile}}</div>
            <div
                    class="address-vice"
            >{{order.province}} {{order.city}} {{order.area}} {{order.address}}</div>
          </div>
          <!--        <div v-else class="no-address">请选择地址</div>-->
        </van-cell
               >

        <van-cell
                v-if="order.take_type==2"
                class="address-item margin-top"
                size="large"
                icon="location-o"
                is-link
        >
          <div class="has-address">
            <div style=" margin-top:1.5rem;  display: flex;justify-content: space-between" class="address-vice">
              <div class="address-name">{{store.contact_name}}, {{store.contact_tel}}</div>
              <div>{{store.distance>=1000?(Math.round(store.distance/100)/10).toFixed(1)+'km': store.distance+'m'}}</div>
            </div>

            <div>{{store.contact_address}},{{store.store_name}}</div>
          </div>
        </van-cell>

      <!-- <div>
        <van-cell v-if="order.status == 0"
                  class="address-item margin-top"
                  size="large"
                  icon="location-o"
        >
          门店地址: 金水区农业路东18号省会中心A座
        </van-cell>
      </div> -->
      <div class="cblock order-status">
        <div v-if="order.status != 0 "  class="float-right">

<!--          <van-count-down auto-start :time="countTime" />-->
            <div>
                <span style="font-weight: bold;font-size: 14px" v-if="order.take_num!=''">核销码:{{order.take_num}}</span>
            </div>
        </div>
        <!-- <van-tag v-if="order.status == 0" type="warning">下单成功,请尽快前往门店付款</van-tag> 订单待支付 -->
       <van-tag v-if="order.status == 0" type="warning">订单待支付</van-tag>
          <van-tag v-else-if="order.status==1" type="warning">已支付</van-tag>
        <van-tag v-else-if="order.status == 2" type="primary">已发货</van-tag>
        <van-tag v-else-if="order.status == 3" type="primary">已收货</van-tag>
        <van-tag v-else-if="order.status > 3" type="success">已完成</van-tag>
        <van-tag v-else-if="order.status == -1">已失效</van-tag>
        <van-tag v-else-if="order.status == -2">已退货/退款</van-tag>
        <van-tag v-else-if="order.status < -2" type="warning">售后中</van-tag>

      </div>

      <div class="cblock order-goods">
        <div class="goods-list">
          <div v-for="item in order.products" :key="item.sku_id">
            <van-card
              :num="item.count"
              :price="item.product_price"
              :desc="item.vice_title"
              :title="item.product_title"
              :thumb="item.product_image"
              @click="viewGoods(item.product_id)"
            />
          </div>
        </div>
        <van-cell title="总价" :value="order.payamount"></van-cell>
        <div class="actions">
          <template v-if="order.status==0">
            <van-button size="small" @click="cancelOrder(order.order_id)">取消</van-button>
           <van-button size="small" type="danger" @click="payOrder(order.order_id)">支付</van-button>
          </template>
          <template v-if="order.status > 1">
            <van-button size="small" @click="expressOrder(order.order_id)">查看物流</van-button>
          </template>
          <template v-if="order.status == 2">
            <van-button size="small" type="info" @click="completeOrder(order.order_id)">确认收货</van-button>
          </template>
          <template v-if="order.status < 0 && order.status > -3">
            <van-button size="small" @click="deleteOrder(order.order_id)">删除</van-button>
          </template>
        </div>
      </div>
      <div class="cblock order-info">
        <van-cell title="订单号" :value="order.order_no">
          <van-button
            slot="right-icon"
            v-clipboard:copy="order.order_no"
            type="info"
            plain
            size="mini"
            style="margin-left:10px;"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
          >复制</van-button>
        </van-cell>
        <van-cell title="下单时间" :value="formatDate(order.create_time)"></van-cell>
        <van-cell title="支付时间" :value="formatDate(order.pay_time)"></van-cell>
        <van-cell title="收货时间" :value="formatDate(order.confirm_time)"></van-cell>
      </div>
    </div>
  </div>
</template>
<script >
import Vue from "vue";
import VueClipboard from "vue-clipboard2";
import utils from "../../utils";
import upsdk from "upsdk-vue";

Vue.use(VueClipboard);

export default {
  data() {
    return {
      order_id: 0,
      countTime: 5000,
      order: {},
      tt:{},
      tn:"",
      id:"",
      store:undefined,

    };
  },
  mounted() {
    let order_id = this.$route.query.id;
    if (order_id && !isNaN(order_id)) {
      this.order_id = order_id * 1;
    } else {
      this.$toast.fail("参数错误");
      this.$router.back();
    }
    this.getData();

  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    viewGoods(goods_id) {
      this.$router.push("/product/detail/" + goods_id);
    },
    formatDate(timestamp) {
      if (!timestamp || timestamp == 0) return "-";
      return utils.dateFormat("Y-m-d H:i:s", timestamp);
    },
    getData() {
      this.$api
        .post("member.order/view", { id: this.order_id })
        .then(json => {
          if (json.code == 1) {
            this.order = utils.fixListImage(json.data, "products.product_image");
            this.store=this.order.store;

          }
        })
        .catch(err => {
          this.$toast.fail(err.msg || "参数错误");
          this.$router.back();
        });
    },
    cancelOrder(order_id) {
      this.$dialog
        .confirm({
          title: "取消订单",
          message: "确定取消此订单?"
        })
        .then(() => {
          this.$api
            .post("member.order/cancel", { id: order_id })
            .then(json => {
              if (json.code == 1) {
                this.$toast.success(json.msg || "操作成功");
                this.changeStatus();
              }
            })
            .catch(err => {
              this.$toast.fail(err.msg || "操作失败");
            });
        });
    },
    deleteOrder(order_id) {
      this.$dialog
        .confirm({
          title: "删除订单",
          message: "确定删除此订单?"
        })
        .then(() => {
          this.$api
            .post("member.order/delete", { id: order_id })
            .then(json => {
              if (json.code == 1) {
                this.$toast.success(json.msg || "操作成功");
                this.changeStatus();
              }
            })
            .catch(err => {
              this.$toast.fail(err.msg || "操作失败");
            });
        });
    },
    payOrder() {
      this.$dialog
        .confirm({
          title: "支付订单",
          message: "使用云闪付支付该订单?"
        })
        .then(() => {
          
      this.$api
        .post("order/againPay", {
          order_id:this.$route.query.id,
          // products:[{ sku_id: this.order.products[0].sku_id, count: this.order.products[0].count }],
          // //收货地址
          // address_id:this.order.address_id,
          // from:null,
          // //金额
          // total_price:this.order.products[0].product_price
        })
        .then(json => {
          //下单成功
          if (json.code == 1) {
            // let order_id = json.data.order_id;
            // this.id=json.data.order_id;
             this.tn = json.data.tn;
              console.log(this.tn)
              console.log(this.id)
            // if(!order_id){
            //   return;
            // }

            upsdk.pay({
              tn: this.tn,
              success: function(res){
                  this.$router.push("/member/order");
                 this.$toast.fail(res.msg);
              },
              fail: function(err){
                console.log(err)
              }
            })    
          }
        })
        });
    },
    expressOrder(order_id) {
      this.$router.push('/member/express?id='+order_id)
    },
    completeOrder(order_id) {
      this.$dialog
        .confirm({
          title: "完成订单",
          message: "确定已收货并完成订单?"
        })
        .then(() => {
          this.$api
            .post("member.order/confirm", { id: order_id })
            .then(json => {
              if (json.code == 1) {
                this.$toast.success(json.msg || "操作成功");
                this.changeStatus();
              }
            })
            .catch(err => {
              this.$toast.fail(err.msg || "操作失败");
            });
        });
    },
    onCopy: function() {
      this.$toast.success("复制成功");
    },
    onError: function() {
      this.$toast.fail("复制失败, 请手动选择复制");
    }
  }
};
</script>

<style lang="scss">
.order-detail-page {
  .cblock {
    margin-top: 20px;
    .goods-list {
      padding: 10px;
    }
  }
  .order-status {
    padding: 10px;
  }
  .actions {
    padding: 10px;
    text-align: right;
    .van-button {
      margin-left: 10px;
    }
  }
}
</style>
